<template>
	<view class="send-view">
		<view class="send-view__message">
			<view
				class="message-item"
				:class="{
					'mine': item.sendUser === myId
				}"
				v-for="(item, index) in messageList"
				:key="item.id">
				<view class="message-item__time" v-if="checkTimeShow(index)">{{item.sendTime}}</view>
				<view class="message-item__content">
					<u-avatar
						size="48"
						shape="square"
						:src="item.avatar"></u-avatar>
					<view class="content-text">{{item.content}}</view>
				</view>
			</view>
		</view>
		<view class="send-view__action">
			<u-icon class="action-icon" size="26" name="/static/send/icon-voice.png"></u-icon>
			<view class="action-input">
				<u--input
					clearable
					border="none"
					v-model="message"
					style="height: 100%;"
					@confirm="sendMessage">
				</u--input>
			</view>
			<u-icon class="action-icon" size="26" name="/static/send/icon-face.png"></u-icon>
			<u-icon class="action-icon" size="26" name="/static/send/icon-add.png"></u-icon>
		</view>
	</view>
</template>

<script>
	import dayjs from '@/vendor/dayjs.min.js'
	export default {
		data() {
			return {
				title: '',
				message: '',
				myId: 1,
				messageList: [
					{
						id: 1,
						avatar: 'https://ps.ssl.qhimg.com/t0185dc54c8f41cf19c.jpg',
						sendUser: 1,
						sendTime: '2024-11-25 21:43',
						content: '在吗，NAS存储服务系统切片短视频合成系统企业微信私域客户服务系统 一件代发订单物流平台这四件帮我下个单'
					},
					{
						id: 2,
						avatar: 'https://ps.ssl.qhimg.com/t01349dcc95e8fa6c37.jpg',
						sendUser: 2,
						sendTime: '2024-11-25 21:44',
						content: '好的 我刚在洗碗'
					},
					{
						id: 3,
						avatar: 'https://ps.ssl.qhimg.com/t0185dc54c8f41cf19c.jpg',
						sendUser: 1,
						sendTime: '2024-11-25 21:48',
						content: 'ok一会下好和我说下哈'
					},
					{
						id: 4,
						avatar: 'https://ps.ssl.qhimg.com/t01349dcc95e8fa6c37.jpg',
						sendUser: 2,
						sendTime: '2024-11-25 21:49',
						content: '都安排下单了'
					},
					{
						id: 5,
						avatar: 'https://ps.ssl.qhimg.com/t0185dc54c8f41cf19c.jpg',
						sendUser: 1,
						sendTime: '2024-11-25 21:49',
						content: '好的'
					}
				]
			};
		},
		onLoad(option) {
			console.log(option)
			this.title = option.nickname
			uni.setNavigationBarTitle({
				title: this.title
			})
		},
		methods: {
			checkTimeShow(index) {
				var isShow = true
				if (index > 0) {
					var currentSendTime = dayjs(this.messageList[index].sendTime).unix()
					var preSendTime = dayjs(this.messageList[index-1].sendTime).unix()
					console.log(currentSendTime, preSendTime)
					isShow = currentSendTime - preSendTime > 120
				}
				return isShow
			},
			sendMessage() {
				console.log('发送消息')
				this.messageList.push({
					id: `${dayjs().unix()}${Math.floor(Math.random()*999+1)}`,
					avatar: 'https://ps.ssl.qhimg.com/t0185dc54c8f41cf19c.jpg',
					sendUser: this.myId,
					sendTime: dayjs().format('YYYY-MM-DD HH:mm'),
					content: this.message
				})
				this.message = ''
				uni.pageScrollTo({
					scrollTop: 10000,
					duration: 100
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
page {
	background-color: #ededed;
}
.send-view {
	&__message {
		padding: 0 30rpx 100rpx;
		.message-item {
			margin-bottom: 30rpx;
			&__time {
				color: #9e9e9e;
				font-size: 24rpx;
				text-align: center;
				padding: 40rpx 0;
			}
			&__content {
				display: flex;
				.content-text {
					position: relative;
					max-width: 68%;
					padding: 20rpx;
					font-size: 32rpx;
					border-radius: 10rpx;
					background-color: #fff;
					margin-left: 20rpx;
					&::before {
						position: absolute;
						left: -6px;
						top: 24px;
						transform: translateY(-50%);
						display: block;
						content: '';
						width: 0;
						height: 0;
						border-top: 6px solid transparent;
						border-bottom: 6px solid transparent;
						border-right: 6px solid #fff;
					}
				}
			}
			&.mine {
				.message-item__content {
					flex-direction: row-reverse;
					.content-text {
						margin-left: 0;
						margin-right: 20rpx;
						background-color: #95ec69;
						&::before {
							left: auto;
							right: -6px;
							border-right: none;
							border-left: 6px solid #95ec69;
						}
					}
				}
			}
		}
	}
	&__action {
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		background-color: #f7f7f7;
		.action-input {
			flex: 1;
			height: 70rpx;
			padding: 0 20rpx;
			border-radius: 8rpx;
			background-color: #fff;
		}
		.action-icon {
			margin: 0 20rpx;
		}
	}
}
</style>
